$(function() {
    $("#switch1").prop("disabled", true);
    $("#switch2").prop("disabled", true);
    $("#switch3").prop("disabled", true);
})
layer = layui.layer
var userinfo = new Vue({
    el: "#app",
    data: {
        image: $.cookie('image'),
        name: $.cookie('name'),
        email: $.cookie('email'),
        qq: $.cookie('qq'),
    },
    methods: {
        reset: function() {
            that = this
            axios.get("http://127.0.0.1:8000/randomImage/?reset=1").then(
                function(response) {
                    var resp = response.data
                    url = resp.url
                    that.image = url
                },
                function(err) {
                    console.log(err)
                }
            )
        },
        switch1act: function() {
            $("#switch1").prop("checked", true);
            $("#switch1").prop("disabled", false);
        },
        switch2act: function() {
            $("#switch2").prop("checked", true);
            $("#switch2").prop("disabled", false);
        },
        switch3act: function() {
            $("#switch3").prop("checked", true);
            $("#switch3").prop("disabled", false);
        },
        save1act: function() {
            $("#switch1").prop("disabled", true);
            console.log(this.name)
                // 合法性判断
            const regName = /^[\w\u4e00-\u9fa5]{2,18}$/ //用户名 2--18位数字,汉字,字母,下划线_
            if (!regName.test(this.name)) {
                $("#switch1").prop("checked", true);
                $("#switch1").prop("disabled", false);
                return layer.alert('用户名需为2--18位数字,汉字,字母,下划线', {
                    icon: 2,
                    skin: 'layer-ext-demo' //见：扩展说明
                })
            }
            that = this
            let param = new URLSearchParams()
            param.append('name', this.name)
            axios.put("http://127.0.0.1:8000/user/", param).then(
                function(response) {
                    var resp = response.data
                    console.log(resp)
                    layer.msg('已保存', { time: 1000 });
                },
                function(err) {
                    console.log(err)
                }
            )

        },
        save2act: function() {
            $("#switch2").prop("disabled", true);
            console.log(this.email)
                // 合法性判断
                //邮箱 以字母或者数字1-9开头+(任意个数字字母下划线\-)+@+(任意字母数字)+.+(2-4个字母)
            const regEmail = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/i
            if (!regEmail.test(this.email)) {
                $("#switch2").prop("checked", true);
                $("#switch2").prop("disabled", false);
                return layer.alert('邮箱格式不正确，请从新输入', {
                    icon: 2,
                    skin: 'layer-ext-demo' //见：扩展说明
                })
            }
            that = this
            let param = new URLSearchParams()
            param.append('email', this.email)
            axios.put("http://127.0.0.1:8000/user/", param).then(
                function(response) {
                    var resp = response.data
                    console.log(resp)
                    layer.msg('已保存', { time: 1000 });

                },
                function(err) {
                    console.log(err)
                }
            )
        },
        save3act: function() {
            $("#switch3").prop("disabled", true);
            console.log(this.qq)
                // 合法性判断
            const regQQ = /^[1-9][0-9]{4,9}$/gim;
            if (!regQQ.test(this.qq)) {
                $("#switch3").prop("checked", true);
                $("#switch3").prop("disabled", false);
                return layer.alert('QQ号码格式不正确，请从新输入', {
                    icon: 2,
                    skin: 'layer-ext-demo' //见：扩展说明
                })
            }
            that = this
            let param = new URLSearchParams()
            param.append('qq', this.qq)
            axios.put("http://127.0.0.1:8000/user/", param).then(
                function(response) {
                    var resp = response.data
                    console.log(resp)
                    layer.msg('已保存', { time: 1000 });
                },
                function(err) {
                    console.log(err)
                }
            )
        },
    }
})



layui.use(['upload', 'element', 'layer', 'form'], function() {
    var $ = layui.jquery,
        upload = layui.upload,
        element = layui.element,
        layer = layui.layer;
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
        elem: '#uploaditem',
        url: '/imageupload/', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        before: function(obj) {
            //预读本地文件示例，不支持ie8
            // obj.preview(function(index, file, result) {
            //     $('#locdisplay').attr('src', result); //图片链接（base64）
            // });
            element.progress('demo', '0%'); //进度条复位
            layer.msg('上传中', {
                icon: 16,
                time: 0
            });
        },
        done: function(res) {
            //如果上传失败
            console.log(res)
            if (res.code > 0) {
                return layer.msg('上传失败:' + res.err);
            }

            url = res.url
                //上传成功的一些操作
                // $('#imageurl').attr('value', url);
            console.log(userinfo)
            userinfo.image = url
            $('#demoText').html(''); //置空上传失败的状态
        },
        error: function() {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function() {
                uploadInst.upload();
            });
        },
        //进度条
        progress: function(n, elem, e) {
            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            if (n == 100) {
                layer.msg('上传完毕', {
                    icon: 1
                });
            }
        }
    });
})